// 画表盘
const drawDial: (ctx: any, size: number) => void = (
  ctx: any,
  size: number
): void => {
  // 表盘
  ctx.beginPath(); // 开始路径
  ctx.strokeStyle = "black"; // 设置颜色
  ctx.lineWidth = 7; // 设置线宽
  ctx.arc(0, 0, size / 2 - 14, 0, 2 * Math.PI); // 绘制圆
  ctx.stroke(); // 绘制路径
  ctx.closePath(); // 闭合路径

  // 表芯
  ctx.beginPath();
  ctx.arc(0, 0, 1, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.closePath();
};

// 角度转弧度
const deg2Rad: (deg: number) => number = (deg: number): number => {
  return deg * (Math.PI / 180);
};

// 画指针
const drawPointer: (
  ctx: any,
  angle: number,
  size: number,
  lineWidth: number,
  strokeStyle?: string
) => void = (
  ctx: any,
  angle: number,
  size: number,
  lineWidth: number,
  strokeStyle: string = "black"
): void => {
  ctx.rotate(angle);

  ctx.beginPath();
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = strokeStyle;
  ctx.moveTo(-10, 0);
  ctx.lineTo(size / 2 - lineWidth * 10, 0);
  ctx.stroke();
  ctx.closePath();
  ctx.restore();
  ctx.save();
};

// 计算指针旋转弧度
const calcPointerRotateRad: (date: Date) => {
  hourPointerRad: number;
  minutePointerRad: number;
  secondPointerRad: number;
} = (
  date: Date
): {
  hourPointerRad: number;
  minutePointerRad: number;
  secondPointerRad: number;
} => {
  const hour: number = date.getHours();
  const minute: number = date.getMinutes();
  const second: number = date.getSeconds();

  const hourDegPerHour: number = 360 / 12; // 每小时时针转过的角度
  const hourDeg: number = hourDegPerHour * hour;
  const minuteDegPerMinute: number = 360 / 60; // 每分钟分针转过的角度
  const minuteDeg: number = minuteDegPerMinute * minute;
  const secondDegPerSecond: number = 360 / 60; // 每秒钟秒针转过的角度
  const secondDeg: number = secondDegPerSecond * second;

  const hourPointerRad: number = deg2Rad(
    hourDeg +
      minute * (hourDegPerHour / 60) +
      second * (hourDegPerHour / 3600) -
      90
  );
  const minutePointerRad: number = deg2Rad(
    minuteDeg + second * (minuteDegPerMinute / 60) - 90
  );
  const secondPointerRad: number = deg2Rad(secondDeg - 90);

  return { hourPointerRad, minutePointerRad, secondPointerRad };
};

export { drawDial, calcPointerRotateRad, drawPointer };
